<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>国庆农资人去哪儿</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />

		<link rel="stylesheet" type="text/css" href="css/animate.css" />

		<style type="text/css">
			.progress-title {
				font-size: 18px;
				font-weight: 700;
				color: #1c2647;
				margin: 0 0 10px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-top: 40px;
			}
			
			.progress {
				height: 30px;
				background: #fff;
				border-top: 5px solid #1c2647;
				border-bottom: 5px solid #1c2647;
				border-radius: 0;
				margin-bottom: 25px;
				overflow: visible;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80vw;
			}
			
			.progress:before,
			.progress:after {
				content: "";
				width: 5px;
				background: #1c2647;
				position: absolute;
				top: 0;
				left: -5px;
				bottom: 0;
			}
			
			.progress:after {
				left: auto;
				right: -5px;
			}
			
			.progress .progress-bar {
				border: none;
				box-shadow: none;
				-webkit-animation: 2s linear 0s normal none infinite running progress-bar-stripes, animate-positive 1s;
				animation: 2s linear 0s normal none infinite running progress-bar-stripes, animate-positive 1s;
			}
			
			@-webkit-keyframes animate-positive {
				0% {
					width: 0;
				}
			}
			
			@keyframes animate-positive {
				0% {
					width: 0;
				}
			}
			
			.user {
				position: absolute;
				bottom: 80px;
				left: 50%;
				width: 40px;
				height: 52px;
				transform: translateX(-50%);
				transition: all linear;
			}
			
			.user img {
				width: 40px;
				height: 52px;
				display: block;
			}
			
			#container {
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				position: fixed;
				background: #fff;
				background: url("imgs/field.png") repeat-y top center;
				background-size: contain;
				top: 0;
				left: 0;
			}
			
			@keyframes toBottom {
				from {
					top: 0
				}
				to {
					top: 100vh;
				}
			}
			
			.flags {
				position: absolute;
				transform: translateX(-50%);
				top: 0;
				animation: toBottom 6s linear;
				/*animation: sao 8s linear;*/
			}
			
			.sao {
				animation: sao 6s linear;
			}
			
			.flags img {
				/*width: 80px;
				height: 80px;*/
				display: block;
			}
			
			@keyframes scrollBG {
				from {
					background-position: 0 0;
				}
				to {
					background-position: 0 603px;
				}
			}
			
			.lt_tree {
				position: absolute;
				left: 0;
				width: 29px;
				top: 0;
				bottom: 0;
				background: url("imgs/lt_tree.png") repeat 0 0;
				/*background-color: darkgreen;
				background-image: url("imgs/rt_tree.png") repeat 0 0;*/
				/*animation: scrollBG 2s linear infinite;*/
			}
			
			.rt_tree {
				position: absolute;
				right: 0;
				width: 29px;
				top: 0;
				bottom: 0;
				background: url("imgs/rt_tree.png") repeat 0 0;
			}
			
			.lt_tree.play,
			.rt_tree.play {
				animation: scrollBG 4s linear infinite;
			}
			
			.lt_tree.pause,
			.rt_tree.pause {
				animation-play-state: paused;
				-webkit-animation-play-state: paused;
			}
			
			.pause {
				animation-play-state: paused;
				-webkit-animation-play-state: paused;
			}
			
			body {
				display: none;
			}
			
			#first_page {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #527ABA;
				/*background: url("imgs/bg.png") no-repeat top center;
				background-size: cover;*/
			}
			
			#first_page .bg {
				position: absolute;
				width: 100vw;
				/*height: 100vh;*/
				top: 0;
				left: 0;
				z-index: 10;
			}
			
			.pan {
				position: absolute;
				z-index: 11;
				width: 82.5vw;
				height: 82.5vw;
				top: 62.4vw;
				left: 50%;
				/*left: 8.75vw;*/
				transform: translateX(-50%);
			}
			
			.pan.animate {
				animation: rotate 3s ease-in-out forwards;
			}
			
			.ar {
				width: 9.2vw;
				height: 15.07vw;
				position: absolute;
				z-index: 12;
				top: 58.1vw;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.head_bg {
				position: absolute;
				z-index: 13;
				width: 14.4vw;
				height: 16.7vw;
				left: 50%;
				transform: translateX(-50%);
				top: 45.4vw;
			}
			
			.head_pic {
				height: 13vw;
				width: 13vw;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				z-index: 13;
				left: 50%;
				transform: translateX(-50%);
				top: 45.9vw;
			}
			
			.click {
				width: 26.8vw;
				height: 26.8vw;
				position: absolute;
				z-index: 13;
				top: 90.4vw;
				left: 50%;
				/*left: 8.75vw;*/
				transform: translateX(-50%);
			}
			
			.click.animate {
				animation: bigsmall 2s ease-in-out infinite;
			}
			
			@keyframes rotate {
				from {
					transform: translateX(-50%) rotate(0deg);
				}
				to {
					transform: translateX(-50%) rotate(3780deg);
				}
			}
			
			@keyframes bigsmall {
				0% {
					transform: translateX(-50%) scale(1);
				}
				50% {
					transform: translateX(-50%) scale(1.2);
				}
				100% {
					transform: translateX(-50%) scale(1);
				}
			}
			
			#second_page {
				position: relative;
				width: 100vw;
				height: 100vh;
				overflow: hidden;
			}
			
			#second_page .bg {
				position: absolute;
				width: 100vw;
				/*height: 100vh;*/
				top: 0;
				left: 0;
				z-index: 10;
			}
			
			.bags {
				position: absolute;
				width: 20vw;
				height: 21.5vw;
				top: 6px;
				right: 0;
				z-index: 13;
				animation: bigsmall2 2s ease-in-out infinite;
			}
			
			.title_pic {
				position: absolute;
				width: 94.1vw;
				height: 35.1vw;
				top: 30px;
				left: 3vw;
				z-index: 12;
			}
			
			@keyframes bigsmall2 {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(1.2);
				}
				100% {
					transform: scale(1);
				}
			}
			
			@keyframes sao {
				0% {
					top: 0;
					transform: translateX(-50%);
				}
				20% {
					top: 20vh;
					transform: translateX(-80%);
				}
				40% {
					top: 40vh;
					transform: translateX(-50%);
				}
				60% {
					top: 60vh;
					transform: translateX(-20%);
				}
				80% {
					top: 80vh;
					transform: translateX(-50%);
				}
				100% {
					top: 100vh;
					transform: translate(-80%);
				}
			}
			
			.start_btn {
				position: absolute;
				bottom: 50px;
				width: 44vw;
				height: 17.9vw;
				left: 28vw;
				z-index: 13;
			}
			
			#act_count {
				position: absolute;
				bottom: 35vw;
				color: rgb(201, 0, 0);
				width: 100%;
				text-align: center;
				padding: 15px;
				z-index: 13;
				font-size: 18px;
				font-weight: bold;
				/*-webkit-text-stroke: 1px #fff;*/
				text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
			}
			
			#canvas_txt {
				position: absolute;
				bottom: 35vw;
				width: 100%;
				z-index: 13;
				left: 0;
				/*height: 40px;*/
			}
			
			#special_page {
				z-index: 300;
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				overflow: hidden;
				background: rgba(0, 0, 0, .8);
				color: #fff;
				box-sizing: border-box;
				padding: 15px;
			}
			
			.special_bar {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				/*align-items: center;*/
			}
			
			.bar_list {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				flex-grow: 1;
				padding-bottom: 10px;
				border-bottom: 1px solid #FFF;
			}
			
			.tab {
				flex-shrink: 0;
				width: 33%;
				text-align: center;
				position: relative;
				border-right: 1px solid #FFFFFF;
				font-size: 16px;
			}
			
			.tab:last-child {
				border: none;
			}
			
			.tab img {
				position: absolute;
				width: 75px;
				height: 11px;
				bottom: -19.5px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.close_btn {
				border-bottom: 1px solid #FFF;
				padding-bottom: 10px;
			}
			
			.close_btn img {
				width: 36px;
				height: 36px;
				display: block;
			}
			
			.current_sta {
				min-height: 30px;
				padding-top: 20px;
				/*line-height: 60px;*/
				font-size: 14px;
			}
			
			.rank {
				position: absolute;
				top: 62px;
				left: 15px;
				right: 15px;
				bottom: 104px;
				overflow: scroll;
			}
			
			.act_info {
				position: absolute;
				top: 62px;
				left: 15px;
				right: 15px;
				bottom: 101px;
				overflow: scroll;
			}
			
			.borde_title {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
			}
			
			.borde_title div {
				width: 25%;
				flex-shrink: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}
			
			.borde_content {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
			}
			
			.borde_content div {
				width: 25%;
				flex-shrink: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
				white-space: nowrap;
				padding: 0 5px;
			}
			
			.borde_content img {
				width: 49px;
				border-radius: 50%;
			}
			
			.borde_content {
				padding: 10px 0;
				border-bottom: 1px solid rgba(255, 255, 255, .6);
			}
			
			.borde_content:last-child {
				border: none;
			}
			
			.about {
				position: fixed;
				bottom: 30px;
				left: 50%;
				transform: translateX(-50%);
				width: 230px;
				text-align: center;
				height: 44px;
				line-height: 40px;
				border: 2px solid #fff;
				color: #fff;
				background: transparent;
				border-radius: 8px;
				font-size: 18px;
			}
			
			.get {
				position: fixed;
				bottom: 89px;
				left: 50%;
				transform: translateX(-50%);
				width: 230px;
				text-align: center;
				height: 44px;
				line-height: 40px;
				background: rgb(231, 163, 0);
				color: #fff;
				border: 2px solid rgb(231, 163, 0);
				border-radius: 8px;
				font-weight: bold;
				font-size: 18px;
				box-sizing: border-box;
			}
			
			.act_title {
				margin: 15px 0;
				height: 30px;
				line-height: 30px;
				background: #FFF;
				width: 90px;
				text-align: center;
				color: rgb(40, 40, 40);
				font-size: 16px;
			}
			
			.act_detail {
				font-size: 14px;
				color: #fff;
				margin-bottom: 25px;
			}
			
			.qrcode_container {
				position: fixed;
				z-index: 400;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(0, 0, 0, .6);
			}
			
			.qrcode_card {
				width: 80vw;
				text-align: center;
				margin: 0 auto;
				background: #FFF;
				top: 10vh;
				position: relative;
				border-radius: 8px;
			}
			
			.qrcode_card:before {
				display: table;
				content: '';
			}
			
			.qrcode {
				margin: 48px auto 20px;
				width: 48vw;
				height: 48vw;
				display: block;
			}
			
			.card_close {
				position: absolute;
				right: 15px;
				top: 15px;
				width: 20px;
				height: 20px;
			}
			
			.finger {
				width: 30vw;
				height: 30vw;
				display: block;
				margin: 0 auto 30px;
			}
			
			.card_bottom {
				border-radius: 0 0 8px 8px;
				background: rgb(207, 228, 255);
				color: rgb(40, 40, 40);
				font-size: 17px;
				height: 40px;
				line-height: 40px;
			}
			
			.present {
				position: relative;
				width: 100%;
			}
			
			.hikari {
				display: block;
				width: 100%;
				animation: rotateloop 8s linear infinite;
			}
			
			.gift {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 19.6vw;
				height: 30.3vw;
				transform: translate(-50%, -50%);
				z-index: 101;
			}
			
			@keyframes rotateloop {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
			
			.rankpage {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				height: 40px;
				line-height: 40px;
			}
			
			.rankpage div {
				width: 25%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				flex-shrink: 0;
				text-align: center;
			}
			
			.rankpage div.disabled {
				color: #999896;
			}
			
			.reg {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, .8);
				z-index: 402;
			}
			
			.reg_card {
				position: absolute;
				width: 80vw;
				top: 40vw;
				left: 10vw;
				background: #fff;
				border-radius: 8px;
				padding: 0 15px 15px;
			}
			
			.reg_title {
				font-size: 17px;
				color: rgb(40, 40, 40);
				text-align: center;
				position: relative;
				height: 50px;
				line-height: 50px;
			}
			
			.reg_close {
				position: absolute;
				width: 15px;
				height: 15px;
				right: 15px;
				top: 17.5px;
			}
			
			.reg_input {
				position: relative;
				margin-top: 20px;
				width: 100%;
				overflow: hidden;
				font-size: auto;
			}
			
			.reg_input input {
				border: none;
				border-bottom: 1px solid rgb(40, 40, 40);
				font-size: 30px;
				font-weight: bold;
				border-radius: 0;
				color: rgb(40, 40, 40);
				padding: 0;
				margin: 0;
				letter-spacing: .2rem;
			}
			
			.daojishi {
				position: absolute;
				right: 0;
				bottom: 0;
				font-size: 17px;
				color: rgb(255, 59, 59);
			}
			
			.reg_next {
				width: 21.3vw;
				text-align: center;
				height: 35px;
				line-height: 35px;
				margin: 0 auto;
				background: rgb(65, 189, 67);
				color: #fff;
				border-radius: 5px;
				margin-top: 40px;
			}
			
			.score {
				position: absolute;
				top: 15px;
				left: 15px;
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				color: #fff;
				font-size: 20px;
				z-index: 100;
			}
			
			.headpic {
				width: 16vw;
				height: 16vw;
				background: #FFFFFF;
				overflow: hidden;
				border-radius: 50%;
			}
			
			.score img {
				width: 15vw;
				height: 15vw;
				margin: 0.5vw;
				border-radius: 50%;
				display: block;
			}
			
			.score_text {
				margin-left: 15px;
			}
			
			.music {
				position: absolute;
				right: 15px;
				top: 27px;
				width: 10.9vw;
				height: 10.9vw;
			}
			
			.music img {
				width: 10.9vw;
				height: 10.9vw;
				display: block;
			}
			
			.music.active {
				animation: rotateloop 3s linear infinite;
			}
			
			.addscore {
				position: absolute;
				opacity: 1;
				left: 0;
				top: -25px;
				width: 80px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				opacity: 0;
				font-size: 20px;
				color: rgb(254, 203, 1);
				animation: bubble .5s linear;
			}
			
			@keyframes bubble {
				from {
					opacity: 0;
					transform: translateY(0);
				}
				to {
					opacity: 1;
					transform: translateY(-10px);
				}
			}
			
			.toleft {
				left: 70px;
			}
			
			.toright {
				right: -10px;
				left: auto;
			}
			
			.gameresult {
				position: fixed;
				z-index: 200;
				background: rgba(0, 0, 0, .8);
				top: -100vh;
				left: 0;
				right: 0;
				width: 100vw;
				height: 100vh;
				/*bottom: 100vh;*/
				overflow: auto;
				color: #fff;
			}
			
			.gameresult.active {
				top: 0;
				transition: top .8s ease-out;
			}
			
			.sidai {
				position: relative;
				padding-top: 29vw;
			}
			
			.sidai>img {
				width: 87.5vw;
				height: 25.7vw;
				display: block;
				margin: 0 auto;
			}
			
			.sidai_head {
				position: absolute;
				top: 8vw;
				left: 50%;
				transform: translateX(-50%);
				/*width: 24vw;
				height: 24vw;*/
				border-radius: 50%;
			}
			
			.sidai_head.success {
				border: 2px solid rgb(111, 213, 102);
			}
			
			.sidai_head.failed {
				border: 2px solid #B3B7B6;
			}
			
			.sidai_head img {
				width: 23vw;
				height: 23vw;
				/*margin: 0.25vw;*/
				display: block;
				border-radius: 50%;
			}
			
			.result_main {
				margin-top: 30px;
				font-size: 20px;
				margin-bottom: 30px;
				text-align: center;
			}
			
			.result_info {
				text-align: center;
				font-size: 16px;
				line-height: 25px;
			}
			
			.choubtn {
				margin: 56px auto 15px;
				width: 61vw;
				height: 44px;
				line-height: 44px;
				border-radius: 5px;
				text-align: center;
				color: #fff;
				background: rgb(231, 163, 0);
			}
			
			.btn_box {
				width: 61vw;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto
			}
			
			.btn_box div {
				width: 28.8vw;
				height: 44px;
				line-height: 44px;
				color: #fff;
				border-radius: 5px;
				background: rgb(65, 189, 67);
				text-align: center;
			}
			
			.focusus {
				margin: 15px auto 30px;
				width: 61vw;
				height: 44px;
				line-height: 40px;
				border: 2px solid #fff;
				border-radius: 5px;
				text-align: center;
				color: #fff;
			}
			
			.duck {
				position: absolute;
				top: 15px;
				right: 0;
				width: 16.8vw;
				height: 6vw;
				opacity: 0;
			}
			
			.duck img {
				width: 16.8vw;
				height: 6vw;
				display: block;
			}
			
			.duck.active {
				animation: flytoleft 3s linear;
			}
			
			@keyframes flytoleft {
				from {
					right: 0;
					opacity: 1;
				}
				to {
					right: 100vw;
					opacity: 1;
				}
			}
			
			audio {
				/*display: none;*/
			}
			
			.audio_box {
				display: none;
			}
			
			.chou_page {
				position: fixed;
				z-index: 200;
				width: 100vw;
				height: 100vh;
				background: #000000;
				top: 0;
				left: 0;
				overflow: hidden;
			}
			
			.chou {
				position: absolute;
				top: 17.3vw;
				width: 39.06vw;
				height: 78vw;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.shrink {
				position: absolute;
				bottom: 26.7vw;
				width: 50vw;
				height: 25.2vw;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.noshrink {
				position: absolute;
				bottom: 26.7vw;
				width: 61vw;
				height: 44px;
				line-height: 44px;
				border-radius: 5px;
				text-align: center;
				left: 50%;
				transform: translateX(-50%);
				color: #fff;
				background: rgb(231, 163, 0);
			}
			
			.chou_result {
				position: fixed;
				z-index: 200;
				width: 100vw;
				height: 100vh;
				background: #000000;
				top: 0;
				left: 0;
				overflow: hidden;
			}
			
			.chou_btns {
				position: absolute;
				bottom: 30px;
				width: 61vw;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.chou1 {
				width: 61vw;
				height: 44px;
				line-height: 44px;
				background: #E7A300;
				color: #fff;
				text-align: center;
				border-radius: 5px;
			}
			
			.chou2 {
				width: 61vw;
				height: 44px;
				line-height: 40px;
				border: 2px solid #fff;
				background: transparent;
				color: #fff;
				text-align: center;
				margin-top: 15px;
				border-radius: 5px;
			}
			
			.chou_detail {
				position: absolute;
				top: 0;
				width: 100vw;
				padding-top: 15px;
			}
			
			.no_chou {
				width: 89vw;
				height: 74.7vw;
				display: block;
				margin: 0 auto;
				margin-top: 40px;
			}
			
			.chou_text {
				font-size: 18px;
				color: #fff;
				text-align: center;
				margin-top: 20px;
				font-weight: bold;
			}
			
			.yes_chou {
				margin-top: 40px;
				width: 90vw;
				display: block;
				margin: 40px auto 50px;
			}
			
			.chou_name {
				font-size: 20px;
				color: #fff;
				font-weight: bold;
				text-align: center;
			}
			
			.game_helper {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, .8);
				z-index: 120;
			}
			
			.helper_arr1 {
				float: left;
				position: relative;
				top: 12vh;
				width: 26.3vw;
				margin-left: 50px;
			}
			
			.helper_arr2 {
				position: relative;
				top: 5vh;
				float: right;
				width: 26.3vw;
				margin-right: 50px;
			}
			
			.pig {
				width: 29.2vw;
				display: block;
				margin: 10vh auto 0;
				animation: big 1s ease-in-out infinite;
			}
			
			@keyframes big {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(1.1);
				}
				100% {
					transform: scale(1);
				}
			}
			
			.helper_text {
				text-align: center;
				color: #fff;
				font-size: 22px;
				line-height: 30px;
				margin-top: 5vh;
			}
			
			.helper_star {
				text-align: center;
				color: #fff;
				font-size: 18px;
				height: 70px;
				line-height: 70px;
				background: url("imgs/starr.png") no-repeat center center;
				background-size: contain;
				margin-top: 40px;
			}
			
			@keyframes flash {
				0% {
					opacity: 1
				}
				30% {
					opacity: .3;
				}
				60% {
					opacity: .8;
				}
				90% {
					opacity: .5;
				}
				100% {
					opacity: 1;
				}
			}
			
			.user.flash {
				animation: flash 1s linear;
			}
			
			.loadingpage {
				position: fixed;
				z-index: 1000;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: #FFFFFF;
			}
			
			.progress-bar-danger {
				background-color: #D9534F;
			}
		</style>
	</head>

	<body>

		<div id="app">

			<div id="first_page" v-if="status==0">
				<img src="imgs/bg.png" alt="" class="bg" />

				<img src="imgs/pan.png" class="pan" :class="{'animate':animate}" />

				<img src="imgs/click.png" class="click" :class="{'animate':!animate}" @click="clickFirst" />

				<img src="imgs/ar.png" class="ar" />

				<img src="imgs/head.png" class="head_bg" />
				<img :src="headurl" class="head_pic" />
			</div>

			<div id="second_page" v-show="status==1">
				<img src="imgs/bg2.png" class="bg" />

				<img src="imgs/bags.png" class="bags" @click="showbag" />

				<img src="imgs/title_pic.png" class="title_pic animated" />

				<img src="imgs/start.png" class="start" />

				<div id="act_count">
					已有{{count}}人参加活动
				</div>
				<!--<canvas id="canvas_txt" height="50"></canvas>-->
				<img src="imgs/start.png" class="start_btn" @click="clickSecond" />
			</div>

			<div id="container" v-if="status==2" @touchend.stop="changedirection">
				<div class="lt_tree" :class="{'pause':game.pause,'play':game.start}">

				</div>
				<div class="rt_tree" :class="{'pause':game.pause,'play':game.start}">

				</div>
				<div class="score">
					<div class="headpic">
						<img :src="headurl||'imgs/test.png'" />
					</div>
					<div class="score_text">{{game.score}}</div>
				</div>

				<div class="music" @touchend.stop="togglemusic" :class="{'active':playmusic}">
					<img :src="playmusic?'imgs/playmusic.png':'imgs/closemusic.png'" />
				</div>
				<div class="flags" :class="{'sao':item.sao}" :id="item.id" v-show="!item.hide" :style="{'left':item.left+'px'}" v-for="(item,index) in flags" :style="{width:item.width+'px'}">
					<img :src="item.src||'imgs/test.png'" :style="{width:item.width+'px'}" />
				</div>
				<div class="user" :style="{width:game.uwidth+'px'}">
					<img :src="game.start&&!game.ended?'imgs/yy.gif':'imgs/yy.png'" :style="{width:game.uwidth+'px'}" />
					<div class="addscore" v-for="item in bubbles">
						+{{item}}
					</div>
				</div>

				<div class="game_helper" v-if="showgamehelper">
					<!--<img src="imgs/lt_arr.png" class="helper_arr1" />
					<img src="imgs/rt_arr.png" class="helper_arr2" />-->
					<img src="imgs/pigfoot.png" class="pig" />

					<div class="helper_text">
						<span style="font-size: 35px;color:#FCD806;line-height: 60px;">点击屏幕</span><br />改变行走方向
					</div>
					<div class="helper_star">
						只有碰到带星星的东西才能加分哟
					</div>
					<div class="chou2" style="margin: 30px auto 0;" @touchend.stop="changedirection">
						我知道了
					</div>
				</div>
			</div>

			<div id="special_page" v-if="showspecial">

				<div class="special_bar">
					<div class="bar_list">
						<div class="tab" @click="tab=0">
							活动说明
							<img v-if="tab==0" src="imgs/selected.png" />
						</div>
						<div class="tab" @click="brank">
							排行榜
							<img v-if="tab==1" src="imgs/selected.png" />
						</div>
						<div class="tab" @click="bprize">
							我的奖品
							<img v-if="tab==2" src="imgs/selected.png" />
						</div>
					</div>
					<div class="close_btn" @click="showspecial=false">
						<img src="imgs/cancel1.png" />
					</div>
				</div>

				<div class="rank" v-if="tab==1">
					<div class="current_sta" v-if="user.rank.rowno">
						当前排名：第{{user.rank.rowno}}名（{{user.rank.score}}分）（只显示前20名）
					</div>
					<div class="current_sta" v-if="!user.rank.rowno">
						当前排名：暂无排名（只显示前20名）
					</div>

					<div class="borde">
						<div class="borde_title">
							<div>
								排行
							</div>
							<div>
								头像
							</div>
							<div>
								昵称
							</div>
							<div>
								成绩
							</div>
						</div>
						<div class="borde_content" v-for="(item,index) in rank">
							<div>
								No.{{item.rowno}}
							</div>
							<div>
								<img :src="item.userImg" />
							</div>
							<div>
								{{item.userName}}
							</div>
							<div>
								{{item.score}}分
							</div>
						</div>
					</div>
					<!--<div class="rankpage">
						<div class="firstpage" :class="{'disabled':page==1}" @click="firstpage">
							首页
						</div>
						<div class="prepage" :class="{'disabled':page==1}" @click="prepage">
							上一页
						</div>
						<div class="nextpage" :class="{'disabled':rank.length<10}" @click="nextpage">
							下一页
						</div>
						<div class="lastpage" :class="{'disabled':rank.length<10}" @click="lastpage">
							末页
						</div>
					</div>-->
				</div>

				<div class="act_info" v-if="tab==0">
					<!--<div class="act_title">
						活动说明
					</div>-->
					<div class="act_detail" style="margin-top: 15px;">
						<span style="color: #ef7600;font-size: 16px;">“国庆农资人下地记”，10万好礼大放送！</span><br /><br />游戏只要达到 <span style="color: #ef7600;font-size: 16px;">200分</span> 以上的，即可参与抽奖。<br />（每人每天有3次抽奖机会）<br />
						<br /> 每人每天有3次游戏机会，3次用完以后，可邀请好友来助力，每3人助力可获得1张复活卡。<br />（每人每天最多可以获得1张复活卡，每张复活卡有2次游戏机会）
					</div>
					<div class="act_title">
						活动奖品
					</div>
					<div class="act_detail">
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">1.成绩排行榜前3名，现金奖励：</span><span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;color: #ef7600;"> 第1名现金800元，第2名500元，第3名100元</span>（如果相同分数，参与游戏时间早的默认排名靠上）<br />
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">2.随机抽奖，奖品多多：</span> <span style="color: #ef7600;">病害图谱挂图；吡唑醚菌酯配方手册；200g磷酸二氢钾；100g微多好；第二届零售商野蛮生长书；国庆植保+营销资料大礼包（两届野蛮生长视频+公益课文字及录音+周5不寂寞录音+植保资料……）</span>
						<br />
						<!--<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">(3)书籍类：</span> 野蛮生长，图谱挂图，吡唑手册，蔬菜植保书……
						<br />-->

					</div>
					<div class="act_title">
						活动时间
					</div>
					<div class="act_detail">
						国庆7天乐不停，2018年9月30日20:00——2018年10月7日20:00
					</div>
					<div class="act_title">
						奖品领取
					</div>
					<div class="act_detail">
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">1.现金领取：</span> 活动结束之后，现金奖3个工作日内，将会在每天农资公众号公布获奖名单和领奖方式。<br />
						<span style="font-size: 16px;display: block;margin-bottom: 10px;margin-top: 10px;">2.随机抽奖奖品：</span> 所有产品进入账户后，需要登录农极客app，进入“个人中心—活动专区—点击领取”，查看并提交相关邮寄信息后，将会有专人电话通知邮寄。
					</div>
					<div class="act_title">
						主办单位
					</div>
					<div class="act_detail">
						每天农资、农极客 <br /><br /> 活动最终解释权归每天农资、农极客所有。
					</div>

				</div>

				<div class="rank" v-if="tab==2" style="bottom:160px;">
					<div class="current_sta" v-for="item in user.gift">
						{{item.createTime}}<span style="font-size: 18px;color:#EF7600">{{item.userName}}</span>抽中<span style="font-size: 18px;color:#EF7600">{{item.prizeName}}</span>
					</div>
					<div class="current_sta" v-if="user.gift.length<=0">
						暂无中奖记录，继续加油哦~
					</div>

					<!--<div class="present">
						<img src="imgs/gen.png" class="gift"/>
						<img src="imgs/mylight.png" class="hikari"/>
					</div>-->

				</div>

				<div class="about" @click="showqrcode">
					关注我们
				</div>

				<div class="get" v-if="tab==2&&user.gift.length>0" @click="checkIDinbag">
					点击领取
				</div>

			</div>

			<div class="reg" v-if="showreg">

				<div class="reg_card">
					<div class="reg_title">
						{{step==1?"请输入手机号":"请输入验证码"}}
						<img src="imgs/cancel2.png" class="reg_close" @click="showreg=false" />
					</div>
					<div class="reg_input" v-if='step==1'>
						<input type="number" name="" id="" v-model="phone" />
					</div>
					<div class="reg_input" v-if="step==2">
						<input type="number" name="" id="" v-model="yzm" />
						<span class="daojishi">
							{{daojishi}}s
						</span>
					</div>

					<div class="reg_next" v-if="step==1" @click="regNext">
						下一步
					</div>

					<div class="reg_next" v-if="step==2" @click="regFinish">
						完成
					</div>
				</div>

			</div>

			<div class="reg" v-if="showgetgift">

				<div class="reg_card">
					<div class="reg_title" style="font-size: 20px;">
						{{device?'提示':'重要提示'}}
						<img src="imgs/cancel2.png" class="reg_close" @click="showgetgift=false" />
					</div>
					<div class="reg_input" v-if='device' style="text-align: center;font-size: 16px;line-height: 25px;">
						奖品已进入您的账户<br /> 可登录农极客app“个人中心—活动专区”查看奖品发送情况。
					</div>
					<div class="reg_input" v-if='!device' style="text-align: left;font-size: 14px;line-height: 20px;margin-top: 0px;">
						所有奖品需要在农极客APP中领取！<br /> 因为目前苹果iOS用户暂时不能下载或者更新农极客app，如果您是苹果手机，我们工作人员将会在活动结束后的15个工作日内，电话联系你，沟通奖品邮寄及发放。
						<br /> 请保持电话畅通，感谢！
					</div>

					<div class="reg_next" v-if="device" @click="see">
						查看奖品
					</div>

				</div>

			</div>

			<div class="gameresult" :class="{'active':showresult}">
				<div class="duck active" v-if="!game.success">
					<img src="imgs/duck.png" />
				</div>
				<div class="sidai">
					<img src="imgs/success.png" v-if="game.success" />
					<img src="imgs/failed.png" v-if="!game.success" />
					<div class="sidai_head" :class="{'success':game.success,'failed':!game.success}">
						<img :src="headurl" />
					</div>
				</div>
				<div class="result_detail">
					<div class="result_main">
						您的成绩为：{{game.score}}分
						<div style="font-size: 16px;margin-top: 10px;" v-if="!game.success">
							只有达到200分才能参与抽奖
						</div>
					</div>
					<div class="result_info">
						<div>
							成功击败全国{{game.defeat||"1%"}}的玩家
						</div>
						<div>
							最佳战绩为：{{game.best||0}}分
						</div>
						<div>
							最佳排名为：{{game.bestrank||0}}名
						</div>
					</div>
					<div class="result_main">
						您今天还有<span>{{game.drawcount}}</span>次游戏机会
					</div>

					<div class="choubtn" @click="gochou" v-if="game.success">
						赶紧去抽奖
					</div>
					<div class="choubtn" @click="replay" v-if="!game.success">
						再玩一次
					</div>
					<div class="btn_box">
						<div @click="watchrank">
							排行榜
						</div>
						<div v-if="game.success" @click="replay">
							再玩一次
						</div>
						<div v-if="!game.success" @click="goindex">
							返回首页
						</div>
					</div>
					<div class="focusus" @click="showqrcode">
						关注我们
					</div>
				</div>
			</div>

			<div class="qrcode_container" v-if="showcode">
				<div class="qrcode_card">
					<img src="imgs/cancel2.png" class="card_close" @click="showcode=false" />

					<img src="imgs/mtnz.png" class="qrcode" />

					<div style="font-size: 18px;color:#000;margin-bottom: 20px;">
						长按识别二维码
					</div>

					<img src="imgs/finger.png" class="finger" />

					<div class="card_bottom">
						关注每天农资 了解更多活动进度
					</div>
				</div>
			</div>
			<div class="audio_box">
				<audio hidden src="src/bg.mp3" id="music_bg" loop></audio>
				<audio hidden src="src/click.mp3" id="music_click"></audio>
				<audio hidden src="src/die.mp3" id="music_die"></audio>
				<audio hidden src="src/duck.mp3" id="music_duck"></audio>
				<audio hidden src="src/failed.mp3" id="music_failed"></audio>
				<audio hidden src="src/interval.mp3" id="music_interval"></audio>
				<audio hidden src="src/score.mp3" id="music_score"></audio>
				<audio hidden src="src/shake.mp3" id="music_shake"></audio>
				<audio hidden src="src/success.mp3" id="music_success"></audio>
			</div>

			<div class="chou_page" v-if="showchou">
				<img src="imgs/chou.png" class="chou" />
				<img src="imgs/shrink.png" class="shrink" v-if="!showchoubtn" />
				<div class="noshrink" v-if="showchoubtn" @click="clickchou">
					点击抽奖
				</div>
			</div>
			<div class="chou_result" v-if="showchouresult">
				<div class="chou_detail">
					<div class="chou_text" v-if="getgift">
						恭喜您获得<span style="color:#ef7600;">{{gift.giftName}}</span>
					</div>

					<img src="imgs/cat.png" class="no_chou" v-if="!getgift" />

					<img :src="gift.guftImg" class="yes_chou" v-if="getgift" />

					<!--<div class="chou_name" v-if="getgift">
						{{gift.giftName}}
					</div>-->

				</div>

				<div class="chou_btns">
					<div class="chou1" v-if="getgift" @click="checkID">
						领取奖品
					</div>
					<div class="chou1" @click="replay" v-if="!getgift">
						再玩一次
					</div>
					<div class="chou2" @click="showqrcode">
						关注我们
					</div>
				</div>
			</div>

			<div class="chou_result" v-if="showshare">
				<div class="chou_detail">

					<img src="imgs/helpad.png" style="width: 95.6vw;height: 43.9vw;margin: 0 auto;display: block;" />

					<div style="font-size: 18px;line-height:25px;color:#fff;width: 80vw;position:fixed;top:50%;left:50%;transform: translate(-50%,-50%);">
						<img src="imgs/tips.png" style="width: 100%;" />
					</div>

				</div>
				<div class="chou_btns" style="bottom: 60px;">
					<img src="imgs/askforhelp.png" style="width: 61vw;" @click="reshare" />
					<!--<div class="chou2" @click="showqrcode">
						关注我们
					</div>-->
				</div>
			</div>

			<div class="chou_result" style="z-index: 202;background: rgba(0,0,0,.98);" v-if="showshare2">
				<div class="chou_detail">

					<img src="imgs/arrow.png" style="width: 65.2vw;height: 46.8vw;margin: 0 auto;display: block;margin-top:30px;" />

					<div style="font-size: 18px;line-height:25px;color:#fff;width: 80vw;position:fixed;top:50%;left:50%;transform: translate(-50%,-50%);">
						<span style="font-size: 20px;">提示</span><br /> 点击右上角，把该页面转发到朋友圈或者微信好友，好友点击“我要助力”按钮，即可点亮助力灯
						<br />
						<span style="color:rgb(255,67,0);font-size: 20px;">目标：成功邀请3人助力</span>
					</div>

				</div>
				<div class="chou_btns">
					<div class="chou2" @click="showshare2=false">
						我知道了
					</div>
				</div>
			</div>

			<div class="qrcode_container" v-if="shownochance">
				<div class="qrcode_card" style="top:50%;transform: translateY(-70%);">
					<img src="imgs/cancel2.png" class="card_close" @click="shownochance=false" />

					<img src="imgs/nochance.png" style="width: 27.3vw;margin-top: 39px;height: auto;" class="qrcode" />

					<div style="font-size: 18px;color:#000;padding-bottom: 30px;">
						今日机会已经用完，明日再来
					</div>

				</div>

			</div>
			<div class="loadingpage" v-if="!loaded">
				<h3 class="progress-title">游戏加载中...</h3>
				<div class="progress">
					<div class="progress-bar progress-bar-danger progress-bar-striped  active" :style="{width:barok?'100%':'90%'}"></div>
				</div>
			</div>
		</div>

		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>

		<script type="text/javascript">
			mui.init();
			var music_bg = $("#music_bg"),
				music_click = $("#music_click"),
				music_die = $("#music_die"),
				music_duck = $("#music_duck"),
				music_failed = $("#music_failed"),
				music_interval = $("#music_interval"),
				music_score = $("#music_score"),
				music_shake = $("#music_shake"),
				music_success = $("#music_success");

			function getUrlString() {
				var urlStr = window.location.search; //?sex=man&age=20
				console.log(urlStr);
				if(urlStr != null && urlStr.toString().length > 1) {
					var myUrlStr = urlStr.substr(1); //sex=man&age=20
					var array1 = myUrlStr.split("&"); //["sex=man"],["age=20"]
					var getString = {};
					for(var i = 0; i < array1.length; i++) {
						getString[array1[i].split("=")[0]] = array1[i].split("=")[1]; //["sex","man"]["age","20"]
					}
					return getString;
				} else {
					console.log("无参数");
				}
			}

			function loadwx() {
				$.ajax({
					type: "POST",
					url: "https://m.nongjike.cn/NJK/app/WeiXinResearc",
					async: true,
					data: {
						url: location.href.split('#')[0],
						RESEARCH_ID: 150
					},
					ContentType: 'application/json; ',
					success: function(data) {
						data = $.parseJSON(data);
						console.log(data);

						vobj.barok = true;

						audio[0].play();

						var tt = "“国庆农资人下地记”，10万好礼大放送！";
						var JIANJIE = "7天畅玩游戏，奖品拿不停~";
						var u = "http://www.meitiannongzi.com/nongjike/game/index.html";

						wx.config({
							//							debug: true,
							appId: data.appId,
							timestamp: data.timestamp,
							nonceStr: data.nonceStr,
							signature: data.signature,
							jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', "chooseImage", "getLocalImgData"] // 必填，需要使用的JS接口列表
						});
						wx.ready(function() {
							console.log("wxAPI-ready")
							wx.onMenuShareTimeline({ //分享到朋友圈
								title: tt, //data.researc.SUBJECT, // 分享标题
								link: u + "?ADTAG=yxy.pyq", // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareAppMessage({ //分享给朋友
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								link: u + "?ADTAG=yxy.hy", // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareQQ({ //分享到QQ
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareWeibo({ //分享到腾讯微博
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								link: u, // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});
							wx.onMenuShareQZone({ //分享到QQ空间
								title: tt, //data.researc.SUBJECT, // 分享标题
								desc: JIANJIE, // 分享描述
								link: u, // 分享链接
								imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
							});

						});
					}
				});
			}

			function getUserinfo(str) {
				$.ajax({
					type: "get",
					//					url: "https://m.nongjike.cn/NJK/app/access_tokenUnionid",
					url: "http://www.meitiannongzi.com/under/weixinApp/getWxUsersss",
					async: true,
					data: {
						code: str
					},
					success: function(data) {
						var data = $.parseJSON(data);
						console.log(data);
						if(!data.wxUser) {
							location.replace(href);
							return false;
						}
						var unionid = data.wxUser.unionid;
						local['unionid'] = data.wxUser.unionid;

						local['userinfo'] = JSON.stringify(data.wxUser);

						local['openid'] = data.wxUser.openId;

						vobj.headurl = data.wxUser.headImgUrl;

						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/saveCount",
							async: true,
							data: {
								openId: data.wxUser.openId,
								userName: data.wxUser.nickname,
								userImg: data.wxUser.headImgUrl
							},
							success: function(res) {
								//							console.log(res);
							}
						});

						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/register",
							async: true,
							data: {
								openId: data.wxUser.openId,
								userName: data.wxUser.nickname,
								userImg: data.wxUser.headImgUrl
							},
							success: function(res) {
								setTimeout(function() {
									vobj.loaded = true;
								}, 1000);

								//							console.log(res);
							}
						});

						if(!!unionid) { //存在unionid,换取userid
							$.ajax({
								type: "get",
								url: "https://m.nongjike.cn/NJK/app/findUnionid",
								async: true,
								data: {
									UNIONID: unionid
								},
								success: function(res) {
									var dt = $.parseJSON(res);
									if(dt.code == 1) {
										if(!dt.data || dt.data == null || dt.data == undefined) { //用户未注册，使用固定的游客USER_ID进行评论
											local['USER_ID'] = "";
										} else { //用户已注册
											local['USER_ID'] = dt.data.USER_ID;
											MtaH5.clickStat("njk")
										}
									}
								}
							});
						} else { //获取unionid失败，使用游客userid
							local['USER_ID'] = "";
							mui.toast("获取unionid失败！！请先关注‘农极客植保图谱公众号’后再访问本页面！！");
						}
					}
				});
			}

			//调用方法
			var gus = new getUrlString();

			var code = gus.code;

			var url = location.href.split("#")[0];

			var appid = "wx3f6627be4ed503c9";
			url = encodeURIComponent(url);

			var href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + url + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"

			var local = window.localStorage,
				session = window.sessionStorage;

			var viewW = window.innerWidth,
				viewH = window.innerHeight,
				v = (viewW - 80) / 5;

			console.log("宽为" + viewW, "高为" + viewH);

			var direction = 0,
				score = 0,
				flags = {},
				start = false;
			var interval,
				interval2;

			//			$("#container").on("touchstart", function() {
			//				console.log("开始游戏");
			//				var cLeft = parseInt($(".user").css("left"));
			//				$(".user").stop();
			//				if(direction == 0) {
			//					var t = (viewW - 40 - cLeft) * 1000 / v;
			//					var s = (viewW - 40);
			//					direction = 1;
			//				} else {
			//					var t = (cLeft - 40) * 1000 / v;
			//					var s = 40;
			//					direction = 0;
			//				}
			//				console.log(cLeft);
			//				$(".user").animate({
			//					left: s + "px"
			//				}, t, "linear", function() {
			//					mui.alert("Failed!!");
			//				});
			//			});

			function startGame() {
				start = true;

			}

			var vobj = new Vue({
				el: "#app",
				data: {
					game: {
						direction: 0,
						score: 0,
						start: false,
						interval: 5,
						time: 60000,
						level: 1,
						ended: false,
						pause: false,
						success: true,
						line: 200,
						readying: false,
						drawcount: 0,
						best: '',
						bestrank: '',
						defeat: '',
						recommend: 0,
						uwidth: 40,
					},
					flags: [],
					barok: false,
					status: 0,
					animate: false,
					tab: 2,
					showcode: false,
					showspecial: false,
					showresult: false,
					showchouresult: false,
					count: 1000,
					headurl: '',
					user: {

					},
					rank: [],
					page: 1,
					loaded: false,
					step: 1,
					showreg: false,
					yzm: '',
					phone: '',
					daojishi: 120,
					playmusic: true,
					scales: 1.5,
					enemys: [{
							src: 'imgs/cao2.png',
							width: 111
						},
						{
							src: 'imgs/ma2.png',
							width: 121
						},
						{
							src: 'imgs/tree2.png',
							width: 75
						},
						{
							src: 'imgs/water2.png',
							width: 71
						},
						{
							src: "imgs/worm.png",
							width: 94
						}

					],
					gifts: [{
							src: 'imgs/gift1.png',
							width: 95,
							score: 30
						},
						{
							src: 'imgs/gift2.png',
							width: 95,
							score: 30
						},
						{
							src: 'imgs/double.png',
							width: 157,
							score: 40
						},
					],
					bubbles: [

					],
					showchou: false,
					showchoubtn: false,
					choued: false,
					getgift: false,
					playchance: 0,
					showshare: false,
					showshare2: false,
					gift: {},
					shownochance: false,
					showgetgift: false,
					showgamehelper: true,
					device: '',
					sending: false,
				},
				methods: {
					brank: function() {
						this.tab = 1;
						MtaH5.clickStat("rankinbag")
					},
					bprize: function() {
						this.tab = 2;
						MtaH5.clickStat("myprize")
					},
					donothing: function() {

					},
					showbag: function() {
						this.showspecial = true;
						MtaH5.clickStat("bag1");
					},
					changedirection: function() {
						if(this.game.start == false) {
							vobj.startGame();
							this.showgamehelper = false;
							direction = 0
							return false;
							//							if(!this.game.reading){
							//								this.game.reading = true;
							//								var timer = setInterval(function(){
							//									vobj.game.interval--;
							//									$("#music_interval")[0].currentTime = 0;
							//									$("#music_interval")[0].play();
							//									if(vobj.game.interval<=0){
							//										clearInterval(timer);
							//										vobj.startGame();
							//									}
							//								},1000);
							//								return false;
							//							}

						}
						if(this.game.ended) {
							return false;
						}
						music_click[0].currentTime = 0;
						music_click[0].play();
						if(this.game.score >= 800) {
							v = (viewW - 80) / 2;
						} else if(this.game.score >= 500) {
							v = (viewW - 80) / 3;
						} else if(this.game.score >= 400) {
							v = (viewW - 80) / 4;
						} else if(this.game.score >= 300) {
							v = (viewW - 80) / 5;
						} else {
							v = (viewW - 80) / 6;
						}
						var cLeft = parseInt($(".user").css("left"));
						if(direction == 0) {
							var t = (viewW - 30 - this.game.uwidth / 2 - cLeft) * 1000 / v;
							var s = (viewW - 30 - this.game.uwidth / 2);
							direction = 1;
						} else {
							var t = (cLeft - 30 - this.game.uwidth / 2) * 1000 / v;
							var s = 30 + this.game.uwidth / 2;
							direction = 0;
						}
						console.log(cLeft);
						$(".user").stop().animate({
							left: s + "px"
						}, t, "linear", function() {
							vobj.gameOver();
						});

					},
					restart: function() {
						this.game.ended = false;
						this.game.score = 0;
						this.game.start = false;
						this.flags = [];
						this.game.pause = false;
						$(".user").css("left", viewW / 2 + "px");
						this.game.reading = false;
						this.game.interval = 5;
						MtaH5.clickStat("replay")
						//						this.startGame();
					},
					startGame: function() {
						this.game.start = true;
						MtaH5.clickStat("gamestart")
						this.bubbles = [];
						if(this.playmusic) {
							//							audio[0].currentTime = 0;
							audio[0].play();
						}

						console.log("开始游戏！");
						music_failed[0].pause();
						music_duck[0].pause();
						this.game.success = true;
						interval = setInterval(function() {
							var flags = JSON.parse(JSON.stringify(vobj.flags));
							console.log(flags);

							if(vobj.game.ended) {
								return false;
							}
							var timerr = 3000;
							if(vobj.game.score >= 140) {
								timerr = 1500;
							}

							if(vobj.game.time % timerr == 0) {
								//								console.log("产生新个体")
								var rdm = Math.random();
								var img;
								var obj = {

								}
								if(rdm >= 0.6) {
									var pic = vobj.gifts[Math.floor(Math.random() * vobj.gifts.length)];
									obj.type = 'flag';
									obj.sao = Math.floor(Math.random() * 10) > 8;
									obj.enemy = false;
									obj.src = pic.src;
									obj.score = pic.score;
									obj.width = pic.width / vobj.scales;
								} else {
									var pic = vobj.enemys[Math.floor(Math.random() * vobj.enemys.length)];
									obj.type = "enemy";
									obj.enemy = true;
									obj.src = pic.src;
									obj.sao = Math.floor(Math.random() * 10) > 8;
									obj.width = pic.width / vobj.scales;
								}
								var xx = (Math.random() * (viewW - 220)) + 100;
								var id = "flag" + parseInt(Math.random() * 100000) + parseInt(xx);
								obj.left = xx;
								obj.id = id;
								obj.hide = false;
								vobj.flags.push(obj);

								console.log($("#" + id));
								setTimeout(function() {
									if($("#" + id).hasClass("pause")) {
										return false;
									}
									$("#" + id).hide();
								}, 6000);
							}

							vobj.game.time -= 100;

							//							return false;
							if(flags.length > 0) {
								var ux = parseInt($(".user")[0].offsetLeft);

								var uh = parseInt($(".user")[0].offsetHeight),
									uw = parseInt($(".user")[0].offsetWidth);
								for(var i = 0; i < flags.length; i++) {

									if(flags[i].hide) {
										continue;
									}

									var fx = flags[i].left,
										fy = parseInt($("#" + flags[i].id).css("top")),
										fh = parseInt($("#" + flags[i].id)[0].offsetHeight),
										fw = parseInt($("#" + flags[i].id)[0].offsetWidth);

									if(flags[i].sao) {
										fx = $("#" + flags[i].id)[0].offsetLeft
									}
									console.log($("#" + flags[i].id)[0].offsetLeft);
									if(fy >= viewH - 80 - fh - uh && fy <= viewH - 80) {
										console.log("会不会碰！！");
										console.log("fx:" + fx, "ux" + ux, "id" + flags[i].id)
										if(flags[i].type == "enemy") {
											if((fx <= (ux + uw / 2)) && ((fx + fw / 2) >= ux)) {
												vobj.gameOver();
												return false;
												//												vobj.game.score += 20;
												//												vobj.game.ended = false;
												//												vobj.flags[i].hide = true;
											}
										} else {
											if(fx <= ux + uw && fx + fw >= ux) {
												vobj.game.score += flags[i].score;
												vobj.bubbles.push(flags[i].score);
												music_score[0].play();
												vobj.game.ended = false;
												vobj.flags[i].hide = true;
											}
										}

									}
									if(fy >= viewH - 10) {
										console.log("消除！");
										vobj.flags[i].hide = true;
										//										vobj.flags.splice(i,1);
									}
								}
							} else {
								return false;
							}

						}, 100);

					},
					gameOver: function() {
						$(".user").addClass("flash");

						setTimeout(function() {
							$(".user").removeClass('flash');
						}, 1000);
						vobj.game.ended = true;
						this.game.reading = false;
						this.game.interval = 5;
						$(".flags,.user").stop();
						$(".flags").addClass("pause")
						clearInterval(interval);
						vobj.game.pause = true;
						var sta = 'no';
						//						mui.alert("GameOver!");

						audio[0].pause();
						audio[0].currentTime = 0;
						if(this.game.score >= this.game.line) {
							this.game.success = true;
							sta = "success"
							//							music_success[0].currentTime = 0;
							//							music_success[0].play();
						} else {
							sta = "fail"
							this.game.success = false;
							//							music_duck[0].currentTime = 0;
							//							music_failed[0].currentTime = 0;
							//							music_failed[0].play();
							//							music_duck[0].play();
						}
						music_die[0].play();

						var _this = this;
						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/modifyScore",
							data: {
								score: this.game.score,
								openId: local['openid']
							},
							async: true,
							success: function(res) {
								var data = JSON.parse(res);
								console.log(data);

								if(data.code == 2) {
									mui.alert(data.message);
									if(data.message == "已无游戏次数！") {
										vobj.showshare = true
									}
									return false;
								}

								vobj.game.drawcount = data.data.draw_count;
								vobj.game.best = data.data.score;
								vobj.game.bestrank = data.data.rowno;
								vobj.game.defeat = data.data.win;
								setTimeout(function() {
									_this.showresult = true;
									_this.firstpage();
									if(sta == "success") {
										music_success[0].play();
									} else {
										music_failed[0].play();
										music_duck[0].play();
									}
								}, 1000);

							}
						});
					},
					clickFirst: function() {
						if(this.animate == true) {
							return false;
						}
						viewH = window.innerHeight;
						MtaH5.clickStat("rotate")

						vobj.checkstatus();
						vobj.loadrank();
						vobj.loadgift();

						music_click[0].play();
						audio[0].play();
						console.log("animate");
						this.animate = true;
						setTimeout(function() {
							vobj.status = 1;
							$(".title_pic").addClass("bounceInDown");

							$("title").html("国庆农资人下地记");
						}, 4000);

						var tt = "“国庆农资人下地记”，10万好礼大放送！";

						var nickname = (JSON.parse(local['userinfo']).nickname);

						nickname = encodeURI(nickname);
						var JIANJIE = "7天畅玩游戏，奖品拿不停~";
						var u = "http://www.meitiannongzi.com/nongjike/game/index.html";

						wx.onMenuShareTimeline({ //分享到朋友圈
							title: tt, //data.researc.SUBJECT, // 分享标题
							link: u + "?ADTAG=yxy.pyq", // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareAppMessage({ //分享给朋友
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							link: u + "?ADTAG=yxy.hy", // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareQQ({ //分享到QQ
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareWeibo({ //分享到腾讯微博
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							link: u, // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareQZone({ //分享到QQ空间
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							link: u, // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
					},
					clickSecond: function() {
						//						if(this.game.drawcount<=0){
						//							this.showshare = true;
						//							return false;
						//						}
						//						music_click[0].play();
						//						vobj.status = 2;
						mui.alert("活动结束！");
						return false;
						MtaH5.clickStat("playgame")
						if(this.game.drawcount > 0) {
							music_click[0].play();
							vobj.status = 2;
							this.showresult = false;
							this.showchouresult = false;
							this.restart();
						} else {
							if(this.game.recommend == 0) {
								this.showshare = true;
								this.twoshare();
							} else {
								this.shownochance = true;
							}
						}

					},
					showqrcode: function() {
						this.showcode = true;
						MtaH5.clickStat("focusus")
					},
					loadrank: function() {

						$.ajax({
							type: "get",
							url: "https://m.nongjike.cn/NJK/app/gameController/getRankScore",
							async: true,
							data: {
								openId: local['openid'],
								pageNum: this.page
							},
							success(res) {
								var data = JSON.parse(res);
								console.log(data);
								if(data.code == 1) {
									vobj.rank = data.list;
									if(!!vobj.user) {

										//										vobj.game.drawcount = data.user.draw_count;
										vobj.game.best = data.user.score;
										vobj.game.bestrank = data.user.rowno;
									}
									vobj.user.rank = data.user;
								}
							}
						});
					},
					firstpage: function() {
						this.page = 1;
						this.loadrank();
					},
					nextpage: function() {
						if(this.rank.length < 10) {
							return false;
						}
						this.page++;
						this.loadrank();
					},
					prepage: function() {
						if(this.page == 1) {
							return false;
						}
						this.page--;
						this.loadrank();
					},
					lastpage: function() {
						this.page = 10;
						this.loadrank();
					},
					loadgift: function() {
						$.ajax({
							type: "get",
							url: "https://m.nongjike.cn/NJK/app/gameController/findPrizeByUser",
							async: true,
							data: {
								openId: local['openid'],
							},
							success(res) {
								var data = JSON.parse(res);
								console.log(data);
								if(data.code == 1) {
									vobj.user.gift = data.data;
								}
							}
						});
					},
					iptphone: function(res) {

					},
					iptyzm: function(res) {

					},
					regNext: function() {
						var phone = this.phone;
						phone = phone.trim();
						console.log(phone);
						var reg = /^1\d{10}$/;

						if(!reg.test(phone)) {
							mui.alert("请输入11位数字的电话号码！");

							return false;
						} else {

							if(this.sending) {
								return false;
							}

							this.sending = true;
							MtaH5.clickStat("phone")
							$.ajax({
								type: "get",
								url: "https://m.nongjike.cn/NJK/app/verifications",
								async: true,
								data: {
									USERNAME: phone
								},
								success: function(res) {
									var data = JSON.parse(res);
									vobj.sending = false;
									if(data.STATUS == 0) {
										vobj.step = 2;
										vobj.daojishi = 120;
										mui.toast("验证码发送成功！请填写验证码！")
										interval2 = setInterval(function() {
											vobj.daojishi--;
											if(vobj.daojishi <= 0) {
												vobj.daojishi = 0;
												clearInterval(interval2);
											}
										}, 1000)
									} else if(data.STATUS == 1) {
										mui.alert("获取验证码失败！ip地址今日到达上限，请明天再试。");
										return false;
									} else if(data.STATUS == 2) {
										mui.alert("获取验证码失败！你的手机号码今日到达上限，请明天再试。");
										return false;
									}
								}
							});

						}
					},
					regFinish: function() {
						if(!this.yzm) {
							mui.alert("请输入验证码！");
							return false;
						}
						clearInterval(interval2);

						var userinfo = JSON.parse(local['userinfo']),
							_this = this;

						//						mui.alert(local['userinfo']);

						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/registerNJK",
							async: true,
							data: {
								UNIONID: local['unionid'],
								nickname: userinfo.nickname,
								sex: userinfo.sex,
								city: userinfo.city,
								openid: local['openid'],
								headImageUrl: userinfo.headImgUrl,
								USERNAME: this.phone,
								PASSWORD: 123456,
								YZM: this.yzm,
								STATUS: 0,
							},
							success: function(res) {
								var data = JSON.parse(res);

								if(data.code == 1) {

									mui.toast("注册成功！");
									local['USER_ID'] = data.USER_ID;
									vobj.showreg = false;
									vobj.step = 1;
									vobj.phone = '';
									vobj.yzm = '';
									vobj.daojishi = 120;
									vobj.getgifts();
									MtaH5.clickStat("register")
								} else if(data.code==2){
									mui.alert(data.message);
								}else if(data.code==3){
									mui.toast("绑定成功！");
									local['USER_ID'] = data.USER_ID;
									vobj.showreg = false;
									vobj.step = 1;
									vobj.phone = '';
									vobj.yzm = '';
									vobj.daojishi = 120;
									vobj.getgifts();
									MtaH5.clickStat("register")
								}
							}
						});
					},
					checkIDinbag: function() {
						this.checkID();
						MtaH5.clickStat("lingqujiangpin")
					},
					checkID: function() {
						if(!local['USER_ID']) {
							this.showreg = true;
						} else {
							this.getgifts();
						}
					},
					getgifts: function() {
						if(!local['openid']) {
							mui.alert("领奖失败！检测到不存在openid");
							return false;
						}
						if(!local["USER_ID"]) {
							mui.alert("领奖失败！检测到不存在userid");
							return false;
						}
						$.ajax({
							type: "post",
							url: "https://m.nongjike.cn/NJK/app/gameController/saveCoupon",
							async: true,
							data: {
								openId: local['openid'],
								USER_ID: local['USER_ID']
							},
							success: function(res) {
								var data = JSON.parse(res);
								if(data.code == 1) {
									vobj.showgetgift = true;
								} else {
									mui.alert("领奖失败！" + data.message);
								}
							}
						});
					},
					togglemusic: function() {
						this.playmusic = !this.playmusic;
						if(this.playmusic) {
							audio[0].play();
							//							if(this.game.start) {
							////								audio[0].currentTime = 0;
							//								audio[0].play();
							//							}

						} else {
							audio[0].pause();
						}
					},
					gochou: function() {
						this.showchou = true;
						this.showchoubtn = false;
						MtaH5.clickStat("clickchou")

						this.choued = false;

						setTimeout(function() {
							vobj.showchoubtn = true;
						}, 5000);
					},
					replay: function() {
						//						this.showresult = false;
						//						this.showchouresult = false;
						//						this.restart();
						if(this.game.drawcount > 0) {
							this.showresult = false;
							this.showchouresult = false;
							this.showgamehelper = true;
							this.restart();
						} else {
							if(this.game.recommend == 0) {
								this.showshare = true;
								this.twoshare();
							} else {
								this.shownochance = true;
							}

						}

					},
					clickchou: function() {
						MtaH5.clickStat("clickluck")
						this.anpai();
					},
					goindex: function() {
						this.showresult = false;
						this.showchouresult = false;
						this.animate = false;
						this.restart();
						this.status = 0;
						audio[0].play();
						MtaH5.clickStat("toindex")
					},
					watchrank: function() {
						this.showspecial = true;
						this.tab = 1;
						MtaH5.clickStat("rank")
					},
					anpai: function() {
						if(this.showchou == true && !this.choued) {
							vobj.choued = true;

							music_shake[0].play();
							$.ajax({
								type: "post",
								url: "https://m.nongjike.cn/NJK/app/gameController/drawing",
								async: true,
								data: {
									openId: local['openid']
								},
								success: function(res) {
									var data = JSON.parse(res);
									console.log(data);
									if(data.code == 1) {

										setTimeout(function() {
											vobj.showchou = false;
											vobj.showchouresult = true;
											if(data.data.type == 0) {
												vobj.getgift = false;
												music_failed[0].play();
											} else {
												vobj.getgift = true;
												vobj.gift = data.data;
												music_success[0].play();
											}
										}, 2000);

									}
								}
							});
						} else {
							return false;
						}
					},
					checkstatus: function() {
						$.ajax({
							type: "get",
							url: "https://m.nongjike.cn/NJK/app/gameController/getUser",
							async: true,
							data: {
								openId: local['openid']
							},
							success: function(res) {
								var data = JSON.parse(res);
								console.log(data);
								vobj.game.recommend = data.user.recommend;
								vobj.game.drawcount = data.user.draw_count;
								//								mui.alert("你有"+ vobj.game.drawcount +"次游戏机会");
							}
						});
					},
					reshare: function() {

						this.showshare2 = true;

						this.twoshare();

					},
					twoshare: function() {
						var nickname = (JSON.parse(local['userinfo']).nickname);
						var img = JSON.parse(local['userinfo']).headImgUrl;

						var tt = nickname.substring(0, 8) + "正在努力赢取复活卡，邀请你来助力！";

						nickname = encodeURI(nickname);
						var JIANJIE = "国庆农资人下地记，奖品拿不停";
						var u = "http://www.meitiannongzi.com/nongjike/game/share.html?name=" + nickname + "&id=" + local['openid'] + "&img=" + img;

						wx.onMenuShareTimeline({ //分享到朋友圈
							title: tt, //data.researc.SUBJECT, // 分享标题
							link: u + "&ADTAG=fxy.pyq", // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareAppMessage({ //分享给朋友
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							link: u + "&ADTAG=fxy.hy", // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareQQ({ //分享到QQ
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareWeibo({ //分享到腾讯微博
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							link: u, // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
						wx.onMenuShareQZone({ //分享到QQ空间
							title: tt, //data.researc.SUBJECT, // 分享标题
							desc: JIANJIE, // 分享描述
							link: u, // 分享链接
							imgUrl: "http://www.meitiannongzi.com/nongjike/game/imgs/guoqing.jpg" // 分享图标
						});
					},
					see: function() {
						MtaH5.clickStat("jumptoapp")
						location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.ylsoft.njk"
					},
					shrinkchou: function() {
						if(this.showchou == true && !this.choued) {
							vobj.anpai();
							MtaH5.clickStat("luck")
						}

					}
				},
				mounted: function() {

					var u = navigator.userAgent;
					var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
					var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
					this.device = isAndroid;

					$("body").show();
					if(!code) {
						location.href = href;
						return false;
					} else if(!!code) {
						getUserinfo(code);
					}

					loadwx();
					playAudio();

					//					music_bg[0].play();
					//					music_success[0].play();
					$.ajax({
						type: "get",
						url: "https://m.nongjike.cn/NJK/app/gameController/getCount",
						async: true,
						success(res) {
							var data = JSON.parse(res);
							console.log(data);
							if(data.code == 1) {
								vobj.count = 1000 + data.count * 6;
							} else {
								vobj.count = 1000 + parseInt(Math.random() * 1000);
							}
						}
					});

					//					var c =  document.getElementById("canvas_txt"),
					//					ctx = c.getContext("2d");
					//					
					//					ctx.fillStyle = 'rgb(201,0,0)';
					//					ctx.font = "28px Arial";
					//					
					//					
					//					ctx.fillText("已有502人参加活动",28,40)
				},
				watch: {
					showshare: function() {
						MtaH5.clickStat("clickforhelp")
					}
				}
			});

			//运动事件监听
			if(window.DeviceMotionEvent) {
				window.addEventListener('devicemotion', deviceMotionHandler, false);
			}

			//获取加速度信息
			//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
			//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
			var SHAKE_THRESHOLD = 10000;
			var last_update = 0;
			var x, y, z, last_x = 0,
				last_y = 0,
				last_z = 0;

			function deviceMotionHandler(eventData) {
				var acceleration = eventData.accelerationIncludingGravity;
				var curTime = new Date().getTime();
				if((curTime - last_update) > 10) {
					var diffTime = curTime - last_update;
					last_update = curTime;
					x = acceleration.x;
					y = acceleration.y;
					z = acceleration.z;
					var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
					if(speed > SHAKE_THRESHOLD) {
						vobj.shrinkchou();
					}
					last_x = x;
					last_y = y;
					last_z = z;
				}
			}
			var audio = $('#music_bg');

			document.getElementById("music_bg").volume = 1;
			console.log(document.getElementById("music_bg").volume);
			var isPlaying = false;
			//
			function playAudio() {
				var audio = $('#music_bg');
				audio[0].play();
				music_click[0].play();
				music_failed[0].play();
				music_duck[0].play();
				music_score[0].play();
				music_success[0].play();
				music_interval[0].play();
				music_shake[0].play();
				music_die[0].play();

				audio[0].pause();
				music_click[0].pause();
				music_failed[0].pause();
				music_duck[0].pause();
				music_score[0].pause();
				music_success[0].pause();
				music_interval[0].pause();
				music_shake[0].pause();
				music_die[0].pause();
				isPlaying = true;
			}
			$(function() {
				playAudio();
				document.addEventListener("WeixinJSBridgeReady", function() {
					WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
						network = e.err_msg.split(":")[1]; //结果在这里
						playAudio();
					});
				}, false);
			})
		</script>

		<script>
			var _mtac = {
				"performanceMonitor": 1,
				"senseQuery": 1
			};
			(function() {
				var mta = document.createElement("script");
				mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
				mta.setAttribute("name", "MTAH5");
				mta.setAttribute("sid", "500648578");
				mta.setAttribute("cid", "500648584");
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(mta, s);
			})();
		</script>
	</body>

</html>